<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .wrap {
            width: 200px;
            height: 200px;
            margin: 20px;
            background-color: #6ff;
            overflow: hidden;
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: grey;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <h3>阻止浏览器默认行为</h3>
            <!-- 自己阻止 -->
            <a href="https://www.baidu.com" @click="preventHandler">百度</a>
            <!-- .prevent 修饰符 -->
            <a href="https://www.baidu.com" @click.prevent="clickHandler">百度</a>
            <!-- 只是单纯的向阻止浏览器默认行为 又不想做额外的操作 -->
            <a href="https://www.baidu.com" @click.prevent>百度</a>

            <br>
            <br>
            <form action="https://www.baidu.com" @submit.prevent>
                <button>提交</button>
            </form>
        </div>
        <hr>
        <div>
            <h3>阻止事件冒泡</h3>
            <div class="wrap" @click="wrapClickHandler">
                <div class="sub" @click.stop="subClickHandler"></div>
            </div>
        </div>
        <div>
            <h3>事件捕获形式触发事件</h3>
            <div class="wrap" @click.capture="wrapClickHandler">
                <div class="sub" @click.capture="subClickHandler"></div>
            </div>
        </div>
        <div>
            <h3>.self修饰符</h3>
            <div class="wrap" @click.self="wrapClickHandler">
                <div class="sub"></div>
            </div>
        </div>
        <div>
            <h3>.once修饰符</h3>
            <div class="wrap" @click.once="wrapClickHandler">
                <div class="sub"></div>
            </div>
        </div>
    </div>
</body>
<script>

    // 指令用法1:
    // v-指令名="指令值"   例如: v-html="html"

    // 指令用法2:
    // 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
    // v-指令名:参数="指令值"   例如: v-on:click="a++"

    // v-指令名:参数.修饰符="指令值"   例如: v-on:click.stop="a++"
    // v-指令名:参数.修饰符1.修饰符2="指令值"   例如: v-on:click.stop="a++"



    // 事件修饰符:
    // .prevent  阻止浏览器的默认行为
    // .stop    阻止事件冒泡
    // .capture  事件捕获形式触发事件
    // .self     触发事件的元素必须是元素本身
    // .once     事件只能触发一次
    // .passive   滚动事件的默认行为 (即滚动行为) 将会立即触发(.passive 修饰符尤其能够提升移动端的性能。)



    var vm = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            preventHandler: function (e) {
                console.log("原生JS阻止浏览器默认行为");
                e.preventDefault();
            },
            clickHandler() {
                console.log("a标签被点击");
            },
            wrapClickHandler() {
                console.log("wrap被点击");
            },
            subClickHandler() {
                console.log("sub被点击");
            }
        },

    })



</script>

</html>